<template>
	<view class="content">
		<button v-if="show == 0" @click="api">点击使用山寨新闻</button>

		<!-- 下拉框 -->
		<view v-if="show ==1" class="select">
			<view class="select-text">新闻选择分类栏===></view>
			<uni-data-select v-model="value" :localdata="range" @change="change" class="slt-a" :clear="false">
			</uni-data-select>
		</view>

		<!-- 搜索框 -->
		<view v-if="show ==1" class="search-head">
			<section title="搜索" type="line">
				<uni-search-bar @confirm="search" placeholder="请输入关键词" :focus="true" v-model="searchValue"
					@input="searchinput">
				</uni-search-bar>
			</section>
		</view>

		<!-- 历史记录 -->
		<view v-if="show ==1" class="History">
			<view class="search-History-head">
				<text>历史记录</text>
				<text class="iconfont iconlajitong" @tap="Delete"></text>
			</view>
			<view v-if="show ==1" class="serach-History-list">
				<view v-for="(item,index) in historyList" :key="index" @tap="selectHistory(item)">
					<text>{{item}}</text>
				</view>
			</view>
		</view>

		<!-- 搜索呈现 -->
		<view v-if="isShow == 1" class="search-list">
			<view class="serach-item" v-for="(item,index) in searchlist" :key="index">
				<view class="search-title">
				<a :href="item.weburl" target="_blank"><img :src="item.pic" alt=""></a>	
					<text>{{item.title}}</text>
				</view>
				<view class="search-conten">
					<text>新闻来自：{{item.src}} | {{item.time}}</text>
				</view>
			</view>
		</view>

		<!-- 新闻列表 -->
		<view v-if="isShow==0" class="get-list-head">
			<view class="get-item" v-for="(item,index) in getlist" :key="index">
				<view class="get-title">
					<a :href="item.weburl" target="_blank"> <img :src="item.pic"></a>
					<text>{{item.title}}</text>
				</view>
				<view class="get-content">
					<span>新闻来自：{{item.src}} | {{item.time}}</span>
					<!-- {{item.content}} -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		channel,
		Get,
		Search
	} from '../../common/api.js'
	import '../../common/iconfont.css'
	export default {
		data() {
			return {
				channellist: [],
				getlist: [],
				show: 0,
				isShow:0,
				searchValue: '',
				searchlist: [],
				historyList: [],
				value: 0,
				text: "",
				range: []
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'searchHistory',
				success: (res) => {
					this.historyList = res.data
				}
			})
		},
		methods: {
			api() {
				channel().then(res => {
					this.channellist = res.data.result
					for (let i = 0; i <= this.channellist.length - 1; i++) {
						var rangelist = {
							value: i,
							text: this.channellist[i],
						}
						this.range.push(rangelist)
					}
					this.show = 1
					console.log(res)
				})
				let a = "头条"
				Get(a).then(res => {
					this.getlist = res.data.result.list
					console.log(res)
				})
			},
			search(res) {
				this.historyList.unshift(this.searchValue);
				this.historyList = [...new Set(this.historyList)];
				uni.setStorage({
					key: 'searchHistory',
					data: this.historyList
				})
			},
			Delete() {
				uni.removeStorage({
					key: 'searchHistory',
					success: () => {
						this.historyList = []
					}
				})
			},
			searchinput(e) {
				let value = e
				console.log(value)
				if (this.searchValue == "") {
					this.searchlist = []
					this.isShow = 0
				} else {
					Search(value).then(res => {
						this.searchlist = res.data.result.list
						this.isShow =1
						console.log(res)
					})
				}
			},
			selectHistory(word) {
				this.searchValue = word
			},
			change(e) {
				console.log(e)
				this.text = this.channellist[e]
				Get(this.text).then(res => {
					this.getlist = res.data.result.list
					console.log(res)
				})
			},

		}

	}
</script>

<style>
	.History {
		margin: 0 30rpx;
		font-size: 26rpx;
	}

	.search-History-head {
		display: flex;
		justify-content: space-between;
	}

	.serach-History-list {
		display: flex;
		margin-top: 36rpx;
		flex-wrap: wrap;
	}

	.serach-History-list view {
		padding: 20rpx 40rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.History text {
		font-size: 20px;
		float: right;
	}

	.get-item {
		position: relative;
		margin-top: 13rpx;
	}

	.get-list-head img {
		margin-top: 15px;
		width: 260rpx;
		height: 230rpx;
	}

	.get-title text {
		position: absolute;
		top: 20rpx;
		margin-left: 15rpx;
	}

	.search-list {
		position: relative;
	}

	.search-list text {
		position: absolute;
		top: 3rpx;
		margin-left: 15rpx;
	}
	.search-conten text{
		position: absolute;
		top: 230rpx;
		left: -15rpx;
	}

	.serach-item img {
		width: 260rpx;
		height: 230rpx;
	}
</style>
